<template>


    <div class="main-content">
      <!-- 销售趋势折线图 -->
      <div class="payment-status-pie">
        <EChart
          :option="pieOption"
          :width="width"
          :height="height"
        />
      </div>
    </div>

</template>

<script setup>
import { computed } from 'vue'
import EChart from '@/components/EChart.vue'
import * as echarts from 'echarts'

const props = defineProps({
  paid: {
    type: Number,
    default: 0
  },
  unpaid: {
    type: Number,
    default: 0
  },
  overdue: {
    type: Number,
    default: 0
  },
  width: {
    type: Number,
    default: 500
  },
  height: {
    type: Number,
    default: 400
  }
})

const pieOption = computed(() => {
  const total = props.paid + props.unpaid + props.overdue
  if (total === 0) {
    return {
      series: [{
        type: 'pie',
        data: [{ name: '暂无数据', value: 1 }],
        label: {
          show: true,
          formatter: '暂无数据',
          fontSize: 16,
          color: '#bfbfbf'
        }
      }]
    }
  }

  return {
    title: {
      text: '月度缴费状态',
      textStyle: {
        fontSize: 20,
        fontWeight: 'bold',
        color: '#e6ff00'
      },
      left: 'center',
      top: 0
    },

    tooltip: {
      trigger: 'item',
      backgroundColor: 'rgba(0, 0, 0, 0.8)',
      borderColor: 'rgba(24, 144, 255, 0.3)',
      borderWidth: 1,
      textStyle: {
        color: '#ffffff',
        fontSize: 14
      },
      formatter: function(params) {
        return `
          <div style="padding: 8px;">
            <div style="color: ${params.color}; font-weight: bold; margin-bottom: 4px;">
              ${params.name}
            </div>
            <div>数量: ${params.value}</div>
            <div>占比: ${params.percent}%</div>
          </div>
        `
      }
    },

    legend: {
      orient: 'vertical',
      right: 10,
      top: 50,
      textStyle: {
        color: '#bfbfbf',
        fontSize: 14
      },
      itemWidth: 16,
      itemHeight: 16,
      itemGap: 20
    },

    series: [{
      type: 'pie',
      startAngle: 120, // 👈 关键：旋转角度（单位：度）
      radius: ['0%', '65%'],
      center: ['45%', '45%'],
      data: [  // ✅ 修复点：添加了缺失的 `data:` 属性
        {
          name: '已缴',
          value: props.paid,
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: '#52c41a' },
              { offset: 1, color: '#73d13d' }
            ])
          }
        },
        {
          name: '未缴',
          value: props.unpaid,
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: '#faad14' },
              { offset: 1, color: '#ffc53d' }
            ])
          }
        },
        {
          name: '逾期',
          value: props.overdue,
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: '#ff4d4f' },
              { offset: 1, color: '#fa8c16' }
            ])
          }
        }
      ],
      label: {
        show: true,
        position: 'outside',
        formatter: '{b}\n{d}%',
        fontSize: 14,
        fontWeight: 'bold',
        color: '#ffffff',
        lineHeight: 20
      },
      labelLine: {
        show: true,
        length: 20,
        length2: 15,
        lineStyle: {
          width: 2,
          color: 'rgba(255, 255, 255, 0.6)'
        }
      },
      emphasis: {
        itemStyle: {
          shadowBlur: 20,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        },
        label: {
          show: true,
          fontSize: 16,
          fontWeight: 'bold',
          color: '#ffffff'
        }
      },
      animationType: 'scale',
      animationEasing: 'elasticOut',
      animationDelay: function (idx) {
        return Math.random() * 200
      }
    }]
  }
})
</script>

<style scoped lang="scss">


@import '@/styles/variables.scss';
@import '@/styles/mixins.scss';



.header {
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  //background: transparent;
  //background: rgba(162, 17, 17, 0);
  //border-bottom: 1px solid $border;
}

h1 {
  color: #e6ff00;
  font-size: 24px;
}

.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 10px;
}

.chart-item {
  @include card-style;
  //height: 500px; /* ✅ 明确设置高度 */
}
.payment-status-pie {
  width: 100%;
  height: 100%;
}
</style>
